CSSã®åãçè§£ããïŒã¹ã¿ã€ã«ã®äŸåé¢ä¿ã宣èšé åºãã¢ãžã¥ã©ãŒèšèšååãæ¢æ±ããå ç¢ã§ä¿å®æ§ãé«ããã°ããŒãã«ã«æ¡åŒµå¯èœãªWebãããžã§ã¯ããæ§ç¯ãåœéçãªãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
CSSã®å©çšã«ãŒã«ïŒã¹ã¿ã€ã«ã®äŸåé¢ä¿å®£èšãšã¢ãžã¥ãŒã«ã·ã¹ãã - ã°ããŒãã«ãªèŠç¹
CSSïŒã«ã¹ã±ãŒãã£ã³ã°ã»ã¹ã¿ã€ã«ã»ã·ãŒãïŒã¯ãŠã§ããã¶ã€ã³ã®åºç€ã§ããããŠã§ããµã€ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®èŠèŠçãªè¡šç€ºãå¶åŸ¡ããŸããCSSãç¿åŸããããšã¯ãèŠèŠçã«é åçã§ããŠãŒã¶ãŒãã¬ã³ããªãŒã§ãä¿å®æ§ã®é«ãããžã¿ã«äœéšãåµé ããããã«äžå¯æ¬ ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãCSSã®å©çšã«ãŒã«ãæ·±ãæãäžããã¹ã¿ã€ã«ã®äŸåé¢ä¿å®£èšãšã¢ãžã¥ãŒã«ã·ã¹ãã ã«çŠç¹ãåœãŠãäžçäžã®éçºè ã«åããæŽå¯ãæäŸããŸãããããã®æŠå¿µããããžã§ã¯ãã®æ§é ãã¹ã±ãŒã©ããªãã£ãåœéåã«ã©ã®ããã«åœ±é¿ããããæ€èšŒãã倿§ãªã°ããŒãã«ãªæèã§é©çšå¯èœãªæ§ã ãªCSSã®æ¹æ³è«ããã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããŸãã
ã¹ã¿ã€ã«ã®äŸåé¢ä¿ãšå®£èšé åºã®çè§£
CSSã®ã«ã¹ã±ãŒãïŒæ»ã®ããã«æµããïŒãšããæ§è³ªã¯åºæ¬çã§ããã¹ã¿ã€ã«ã宣èšãããé åºã¯ãããããã©ã®ããã«é©çšããããã«å€§ãã圱é¿ããŸãããããçè§£ããããšãã广çãªã¹ã¿ã€ãªã³ã°ãžã®ç¬¬äžæ©ã§ããã«ã¹ã±ãŒãã¯ä»¥äžã®ã«ãŒã«ã«åŸããŸãïŒ
- ãªãªãžã³ïŒèµ·æºïŒïŒã¹ã¿ã€ã«ã¯äž»ã«3ã€ã®ãœãŒã¹ããçºçããŸãïŒãŠãŒã¶ãŒãšãŒãžã§ã³ãïŒãã©ãŠã¶ã®ããã©ã«ãïŒããŠãŒã¶ãŒã¹ã¿ã€ã«ã·ãŒãïŒãã©ãŠã¶ã®èšå®ïŒããããŠå¶äœè ã¹ã¿ã€ã«ã·ãŒãïŒããªããæžãCSSïŒã§ããéåžžãå¶äœè ã¹ã¿ã€ã«ã·ãŒããåªå ãããŸãããéèŠåºŠã«ãã£ãŠã¯ãŠãŒã¶ãŒã¹ã¿ã€ã«ãå¶äœè ã¹ã¿ã€ã«ãäžæžãããããšããããŸãã
- 詳现床ïŒSpecificityïŒïŒããã¯ãåãèŠçŽ ã«è€æ°ã®ã«ãŒã«ãé©çšãããå Žåã«ãã©ã®ã¹ã¿ã€ã«ã«ãŒã«ãåªå ãããããæ±ºå®ããŸããã€ã³ã©ã€ã³ã¹ã¿ã€ã«ïŒHTMLèŠçŽ ã«çŽæ¥é©çšïŒãæãé«ã詳现床ãæã¡ãŸããæ¬¡ã«IDãã¯ã©ã¹/屿§/æ¬äŒŒã¯ã©ã¹ããããŠæåŸã«èŠçŽ ïŒã¿ã°åïŒãšç¶ããŸãã
- éèŠåºŠïŒ
!importantãä»ããŠå®£èšãããã«ãŒã«ã¯ãã€ã³ã©ã€ã³ã¹ã¿ã€ã«ãããå«ãä»ã®ãã¹ãŠã®ã«ãŒã«ãäžæžãããŸãããã¡ã³ããã³ã¹äžã®åé¡ãåŒãèµ·ããå¯èœæ§ããããããäžè¬çã«ãã®äœ¿çšã¯æšå¥šãããŸããã - 宣èšé åºïŒåã詳现床ãšãªãªãžã³ãæã€å Žåãã¹ã¿ã€ã«ã·ãŒãã®åŸã®æ¹ã§å®£èšãããã«ãŒã«ããåã®å®£èšãããåªå ãããŸãã
ãã®äŸãèããŠã¿ãŸãããïŒ
<!DOCTYPE html>
<html>
<head>
<title>Style Dependency Example</title>
<style>
p { color: blue; }
.highlight { color: red; }
p.highlight { color: green; }
</style>
</head>
<body>
<p class="highlight">This text will be green.</p>
</body>
</html>
ãã®å Žåãããã¹ãã¯ç·è²ã«ãªããŸãããªããªããp.highlight { color: green; } ãšããã«ãŒã«ã .highlight { color: red; } ã p { color: blue; } ããã詳现床ãé«ãããã§ãã
ã¹ã¿ã€ã«ã®äŸåé¢ä¿ã管çããããã®ãã¹ããã©ã¯ãã£ã¹
- äžè²«ããæ§é ãç¶æããïŒCSSãã¡ã€ã«ãè«ççã«æŽçããŸããããã«ã¯ããªã»ãããããŒã¹ã¹ã¿ã€ã«ãã³ã³ããŒãã³ããã¬ã€ã¢ãŠãããšã«ãã¡ã€ã«ãåããããšãå«ãŸãããããããŸããã
- ã¹ã¿ã€ã«ã¬ã€ãã«åŸãïŒã¹ã¿ã€ã«ã¬ã€ããéµå®ããããšã§ãããŒã ã®æåšå°ãå°éç¥èã«é¢ãããããããžã§ã¯ãå šäœã§äžè²«æ§ãšäºæž¬å¯èœæ§ã確ä¿ãããŸããäŸãã°ãã¹ã¿ã€ã«ã¬ã€ãã§ã¯ã¯ã©ã¹ã®åœåèŠåãããããã£ã®é åºãç¹å®ã®åäœã®äœ¿çšãªã©ãæå®ã§ããŸãã
- CSSããªããã»ããµïŒSassãLessïŒã䜿çšããïŒãããã®ããŒã«ã¯ã倿°ãããã¯ã¹ã€ã³ããã¹ããªã©ã®æ©èœã远å ããŠCSSã匷åããäŸåé¢ä¿ã®ç®¡çãå¹çåããã³ãŒãã®å¯èªæ§ãåäžãããŸããç¹ã«è€éãªã¹ã¿ã€ãªã³ã°èŠä»¶ãæã€å€§èŠæš¡ãããžã§ã¯ãã§åœ¹ç«ã¡ãã³ãŒãã管çãããããããšã©ãŒãæžãããŸãã
- !importantãé¿ããïŒ
!importantã®å€çšã¯ããããã°ãšã¡ã³ããã³ã¹ãå°é£ã«ããŸãã詳现床ãšå®£èšé åºãéããŠæãŸããã¹ã¿ã€ãªã³ã°ãå®çŸããããã«åªããŠãã ããã - CSS倿°ãæ€èšããïŒCSS倿°ïŒã«ã¹ã¿ã ããããã£ïŒãå©çšããŠå€ãäžå åããã¹ã¿ã€ã«ã·ãŒãå šäœã§ç°¡åã«æŽæ°ã§ããããã«ããŸããããã«ããäžè²«æ§ãä¿é²ãããããŒãäœæãç°¡çŽ åãããŸãã
ã¢ãžã¥ãŒã«ã·ã¹ãã ãšCSSã¢ãŒããã¯ãã£
ãããžã§ã¯ããæé·ããã«ã€ããŠãäœçŸãäœåè¡ãã®ãã©ãããªCSSãã¡ã€ã«ãç¶æããããšã¯éçŸå®çã«ãªããŸããã¢ãžã¥ãŒã«ã·ã¹ãã ãšCSSã¢ãŒããã¯ãã£ã¯ãè€éãã管çããåå©çšæ§ãä¿é²ããã®ã«åœ¹ç«ã¡ãŸãã
ã¢ãžã¥ãŒã«ã·ã¹ãã ã¯ãCSSãç¬ç«ããåå©çšå¯èœãªã³ã³ããŒãã³ãã«æŽçããŸãããã®ã¢ãããŒãã¯ãä¿å®æ§ãã¹ã±ãŒã©ããªãã£ãããã³å ±åäœæ¥ã匷åããããã¯äžçäžã«ããããŒã ã«ãšã£ãŠéåžžã«éèŠã§ãã
人æ°ã®CSSã¢ãŒããã¯ãã£
- BEM (Block, Element, Modifier)ïŒãã®æ¹æ³è«ã¯ãåå©çšå¯èœãªã³ãŒãã®ãããã¯ãäœæããããšã«çŠç¹ãåœãŠãŠããŸãããããã¯ã¯èªå·±å®çµåã®UIã³ã³ããŒãã³ãïŒäŸïŒãã¿ã³ïŒã衚ããŸãããšã¬ã¡ã³ãã¯ãããã¯ã®äžéšïŒäŸïŒãã¿ã³ã®ããã¹ãïŒã§ããã¢ãã£ãã¡ã€ã¢ã¯ãããã¯ã®å€èгãç¶æ ïŒäŸïŒç¡å¹åããããã¿ã³ïŒã倿ŽããŸããBEMã¯ã³ãŒãã®æçæ§ãåå©çšæ§ãç¬ç«æ§ãä¿é²ããŸãã以äžã®äŸã¯ããã®ä»çµã¿ãçè§£ããã®ã«åœ¹ç«ã¡ãŸãïŒ
- OOCSS (Object-Oriented CSS)ïŒOOCSSã¯ãæ§é ãšã¹ãã³ã®åé¢ã奚å±ããŸããããã¯ãèŠçŽ ã®èŠèŠçããããã£ãå®çŸ©ããåå©çšå¯èœãªCSSã¯ã©ã¹ã®äœæãä¿é²ããŸããéèŠãªã®ã¯ãç°ãªãèŠèŠã³ã³ããŒãã³ããäœæããããã«ç°¡åã«çµã¿åãããããšãã§ããåå©çšå¯èœãªãªããžã§ã¯ãã®ã©ã€ãã©ãªãäœæããããšã§ããOOCSSã¯ãåå©çšæ§ãä¿é²ããç¹°ãè¿ããé¿ãããããã¢ãžã¥ã©ãŒãªã¢ãããŒããç®æããŸãã
- SMACSS (Scalable and Modular Architecture for CSS)ïŒSMACSSã¯CSSã«ãŒã«ã5ã€ã®ã«ããŽãªïŒããŒã¹ãã¬ã€ã¢ãŠããã¢ãžã¥ãŒã«ãã¹ããŒããããŒãïŒã«åé¡ããŸãããã®æç¢ºãªåé¢ã«ãããç¹ã«å€§èŠæš¡ãããžã§ã¯ãã«ãããŠCSSã³ãŒãã®çè§£ãšä¿å®ã容æã«ãªããŸããSMACSSã¯ãCSSãã¡ã€ã«ã®äžè²«ããæ§é ãéèŠããæç¢ºãªçµç¹äœç³»ãéããŠã¹ã±ãŒã©ããªãã£ãä¿é²ããŸãã
<!-- HTML -->
<button class="button button--primary button--disabled">Submit</button>
/* CSS */
.button { ... }
.button--primary { ... }
.button--disabled { ... }
ã¢ãžã¥ãŒã«ã·ã¹ãã ã䜿çšããå©ç¹
- ä¿å®æ§ã®åäžïŒ1ã€ã®ã³ã³ããŒãã³ããžã®å€æŽãããµã€ãã®ä»ã®éšåã«åœ±é¿ãäžããå¯èœæ§ãäœããªããŸãã
- åå©çšæ§ã®åäžïŒã³ã³ããŒãã³ãã¯ãããžã§ã¯ãã®ç°ãªãéšåã§ç°¡åã«åå©çšã§ããŸãã
- å ±åäœæ¥ã®åŒ·åïŒããŒã ã¯äºãã«ç«¶åããããšãªããå¥ã ã®ã³ã³ããŒãã³ãã§äœæ¥ã§ããŸãã
- ã¹ã±ãŒã©ããªãã£ïŒã¢ãžã¥ã©ãŒæ§é ã«ããããããžã§ã¯ããæé·ããã«ã€ããŠã¹ã±ãŒã«ã¢ãããããããªããŸãã
- 詳现床ã®ç«¶åã®åæžïŒã¢ãžã¥ã©ãŒèšèšã¯ãã°ãã°è©³çŽ°åºŠãäœããããããã¹ã¿ã€ã«ã®äžæžãã容æã«ãªããŸãã
å®è·µäŸïŒCSSã¢ãžã¥ãŒã«ãšã°ããŒãã«ãªãã¹ããã©ã¯ãã£ã¹ã®å®è£
äžçäžã®éçºè ã«é¢é£ããããã€ãã®å®è·µäŸãæ¢ã£ãŠã¿ãŸãããããããã®äŸã§ã¯ãç°ãªãæåçèæ¯ãåœéçãªãã¹ããã©ã¯ãã£ã¹ãèæ ®ããªãããåè¿°ã®æŠå¿µãå®éã®ã·ããªãªã«é©çšããæ¹æ³ã瀺ããŸãã
äŸ1ïŒåå©çšå¯èœãªãã¿ã³ã³ã³ããŒãã³ãã®æ§ç¯
å°åå·®ã«é¢ä¿ãªãããŠã§ããµã€ãå šäœã§äœ¿çšã§ãããã¿ã³ã³ã³ããŒãã³ãã®äœæãèããŠã¿ãŸããããããã«ã¯ãã¢ãžã¥ã©ãŒã¢ãããŒãã䜿çšããŠæ§é ãäœæããå¿ èŠããããŸãããã®äŸã§ã¯BEMã䜿çšããŸãã
<!-- HTML -->
<button class="button button--primary">Submit</button>
<button class="button button--secondary button--disabled">Cancel</button>
/* CSS (using Sass) */
.button {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-align: center;
}
.button--primary {
background-color: #007bff;
color: white;
}
.button--secondary {
background-color: #6c757d;
color: white;
}
.button--disabled {
opacity: 0.6;
cursor: not-allowed;
}
ãã®äŸã§ã¯ãbuttonããããã¯ãbutton--primaryãšbutton--secondaryãç°ãªããã¿ã³ã¹ã¿ã€ã«ã®ããã®ã¢ãã£ãã¡ã€ã¢ãbutton--disabledãç¡å¹ç¶æ
ã®ã¢ãã£ãã¡ã€ã¢ã§ãããã®ã¢ãããŒãã«ãããããŒã¹ãšãªããã¿ã³ã¹ã¿ã€ã«ãåå©çšããç°ãªãã³ã³ããã¹ãã«åãããŠç°¡åã«å€æŽã§ããŸãã
äŸ2ïŒåœéåãšå°ååã«é¢ããèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ãŠã§ããµã€ããæ§ç¯ããå ŽåãCSSã¯ç°ãªãèšèªãããã¹ãã®æ¹åïŒLTR/RTLïŒãæåçãªå¥œã¿ã«å¯Ÿå¿ã§ããããã«èšè¿°ããå¿ èŠããããŸãããŸãããŠã§ããµã€ããé害ãæã€äººã ã«ãšã£ãŠå æ¬çã§ã¢ã¯ã»ã¹ããããããããšãäžå¯æ¬ ã§ããCSSã¯ä»¥äžã®ãããªããã€ãã®æ¹æ³ã§ããããµããŒãã§ããŸãïŒ
- ããã¹ãã®æ¹åïŒLTR/RTLïŒïŒ
directionãtext-alignã®ãããªCSSããããã£ã䜿çšããŠãå³ããå·Šãžèšè¿°ããèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒã«å¯Ÿå¿ããŸããäŸïŒ - ãã©ã³ãã«é¢ããèæ ®äºé ïŒç°ãªãèšèªã®å¹ åºãæåããµããŒããããã©ã³ããéžæããŸãããã©ãŒã«ããã¯ãã©ã³ããæäŸããããã«ãã©ã³ãã¹ã¿ãã¯ã®äœ¿çšãæ€èšããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£ïŒCSSããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŸããã»ãã³ãã£ãã¯HTMLã䜿çšããååãªè²ã®ã³ã³ãã©ã¹ããæäŸãããŠã§ããµã€ããæ¯æŽæè¡ïŒã¹ã¯ãªãŒã³ãªãŒããŒïŒã§äœ¿çšã§ããããšã確èªããŸããããã«ã¯ããã¶ã€ã³ãšã³ãŒããWCAGïŒWeb Content Accessibility GuidelinesïŒã®ãããªã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãæºãããŠããããšããã¹ãããããšãå«ãŸããŸãã
.rtl {
direction: rtl;
text-align: right;
}
äŸ3ïŒã¬ã¹ãã³ã·ããã¶ã€ã³ãšã¡ãã£ã¢ã¯ãšãª
ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããµã€ãã¯ãã¬ã¹ãã³ã·ãã§ãªããã°ãªãããç°ãªãç»é¢ãµã€ãºãããã€ã¹ã«é©å¿ããå¿ èŠããããŸãããã®ããã«ã¯ã¡ãã£ã¢ã¯ãšãªãäžå¯æ¬ ã§ãã
/* Default styles */
.container {
width: 90%;
margin: 0 auto;
}
/* For larger screens */
@media (min-width: 768px) {
.container {
width: 70%;
}
}
/* For even larger screens */
@media (min-width: 992px) {
.container {
width: 60%;
}
}
ãã®ã¢ãããŒãã«ãããã¹ããŒããã©ã³ãã倧åãã¹ã¯ãããã¢ãã¿ãŒãŸã§ãããŸããŸãªããã€ã¹ã§ã³ã³ãã³ããæé©ã«è¡šç€ºãããããšãä¿èšŒãããŸããããã¯ãã€ã³ã¿ãŒãããé床ãããã€ã¹ã®å©çšãã¿ãŒã³ãç°ãªãåœã ã§ç¹ã«éèŠã§ãã
é«åºŠãªCSSã®æŠå¿µãšãã¯ããã¯
åºæ¬ãè¶ ããŠãCSSã®å¹çãšä¿å®æ§ãããã«åäžãããããã€ãã®é«åºŠãªãã¯ããã¯ããããŸãã
CSSããªããã»ããµïŒSassãLessïŒ
CSSããªããã»ããµïŒSassãLessïŒã¯ã倿°ããã¹ããããã¯ã¹ã€ã³ã颿°ãªã©ãCSSã«ç¹å¥ãªæ©èœã远å ããŸããããªããã»ããµã䜿çšãããšãCSSã³ãŒãã®æŽçãšä¿å®æ§ãå€§å¹ ã«åäžããç°ãªãåœãã¿ã€ã ãŸãŒã³ã«åæ£ããŠããããŒã ã®æéãç¯çŽã§ããŸãã
äŸïŒSass倿°ã®äœ¿çš
// SCSS (Sass)
$primary-color: #007bff;
$font-size: 16px;
.button {
background-color: $primary-color;
font-size: $font-size;
color: white;
}
ããã«ããã倿°ã®å€ã倿Žããã ãã§ããŠã§ããµã€ãå šäœã®è²ããã©ã³ããç°¡åã«å€æŽã§ããŸãã
CSS倿°ïŒã«ã¹ã¿ã ããããã£ïŒ
CSS倿°ïŒã«ã¹ã¿ã ããããã£ïŒã¯ãçŸä»£ã®CSSã®åŒ·åãªæ©èœã§ãããããã¯ãCSSã³ãŒãå šäœã§åå©çšã§ããå€ãå®çŸ©ããæ¹æ³ãæäŸããŸããããªããã»ããµã®å€æ°ã«äŒŒãŠããŸããããã©ãŠã¶ã§ãã€ãã£ãã«ãµããŒããããŠããŸããããã«ãããããŒãäœæãšã«ã¹ã¿ãã€ãºãç°¡çŽ åãããŸãã
:root {
--primary-color: #007bff;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
color: white;
}
CSS倿°ã䜿çšãããšãã¹ã¿ã€ã«ã·ãŒãã«æå°éã®å€æŽãå ããã ãã§ãµã€ãã®ã«ãã¯ã¢ã³ããã£ãŒã«ãç°¡åã«èª¿æŽã§ããããã¯ã°ããŒãã«ãã¶ã€ã³ã«ãšã£ãŠéåžžã«éèŠã§ãã
CSSãã¬ãŒã ã¯ãŒã¯ïŒBootstrapãTailwind CSSïŒ
CSSãã¬ãŒã ã¯ãŒã¯ã¯ãäºåã«æ§ç¯ãããã³ã³ããŒãã³ããšã¹ã¿ã€ã«ãæäŸããéçºãå€§å¹ ã«ã¹ããŒãã¢ãããããããšãã§ããŸãã人æ°ã®ãã¬ãŒã ã¯ãŒã¯ã«ã¯BootstrapãTailwind CSSããããŸãããã¬ãŒã ã¯ãŒã¯ã®äœ¿çšã¯ããŠã§ããµã€ãã®è¿ éãªãããã¿ã€ãã³ã°ãããã¶ã€ããŒãšéçºè ãå ±éã®ãã¶ã€ã³èšèªãå¿ èŠãšããããŒã ã«ãšã£ãŠç¹ã«åœ¹ç«ã¡ãŸãã
Bootstrapã®äŸïŒ
<!-- HTML -->
<button class="btn btn-primary">Submit</button>
Tailwind CSSã®äŸïŒ
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Submit</button>
CSSãã¬ãŒã ã¯ãŒã¯ã¯åœ¹ç«ã€äžæ¹ã§ãCSSãã¡ã€ã«ã®ãµã€ãºãå¢å ãããå¯èœæ§ããããããç¹å®ã®ãããžã§ã¯ãã«ãšã£ãŠå©ç¹ãæ¬ ç¹ãäžåããã©ãããè©äŸ¡ããããšãéèŠã§ãã
ã°ããŒãã«ãªCSSéçºã®ããã®ãã¹ããã©ã¯ãã£ã¹
ã°ããŒãã«ãããžã§ã¯ãåãã«CSSãéçºããéã«å¿ã«çããŠããã¹ããã¹ããã©ã¯ãã£ã¹ãããã€ã玹ä»ããŸãïŒ
- åœéåãèšç»ããïŒæåããåœéåïŒi18nïŒã念é ã«çœ®ããŠãŠã§ããµã€ããèšèšããŸããããã¯ãèšèªãµããŒããæ¥ä»/æå»åœ¢åŒãé貚ãç°ãªãæåçèæ¯ãèæ ®ããããšãæå³ããŸãã
- çžå¯ŸåäœïŒemãremã%ïŒã䜿çšããïŒãã©ã³ããµã€ãºã寞æ³ã«ãã¯ã»ã«ïŒpxïŒã®ãããªçµ¶å¯Ÿåäœã䜿çšããã®ãé¿ããŸããçžå¯Ÿåäœã䜿çšããŠããŠã§ããµã€ããç°ãªãããã€ã¹ãç»é¢ãµã€ãºã§é©åã«ã¹ã±ãŒãªã³ã°ãããããã«ããŸãã
- ããã©ãŒãã³ã¹ãåªå ããïŒæªäœ¿çšã®ã¹ã¿ã€ã«ãåé€ããç»åãæé©åããã³ãŒãã®æå°åã䜿çšããŠCSSãã¡ã€ã«ã®ãµã€ãºãæå°éã«æããŸããèªã¿èŸŒã¿æéãéãããšã¯ãã€ã³ã¿ãŒãããæ¥ç¶ãé ãå°åã®ãŠãŒã¶ãŒã«å©çããããããŸãã
- ãã©ãŠã¶ãšããã€ã¹éã§ãã¹ãããïŒãŠã§ããµã€ããç°ãªããã©ãŠã¶ãããã€ã¹ã§æ£ãã衚瀺ãããããšã確èªããŸããããã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«äžè²«ããäœéšãæäŸããããã«äžå¯æ¬ ã§ãããã®ããã»ã¹ãå¹çåããããã«ãã¯ãã¹ãã©ãŠã¶ãã¹ãããŒã«ã®äœ¿çšãæ€èšããŠãã ããã
- ã³ãŒããææžåããïŒCSSã³ãŒãã説æããããã«ãæç¢ºã§ç°¡æœãªã³ã¡ã³ããèšè¿°ããŸããããã«ãããäžçäžã®éçºè ããã¶ã€ããŒãã³ãŒãããŒã¹ãçè§£ããç¶æãããããªããŸãã
- 广çã«ååããã³ãã¥ãã±ãŒã·ã§ã³ããšãïŒåœéçãªããŒã ã§ã¯ãå šå¡ãåãèªèãå ±æã§ããããã«ãæç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«ãšã³ãŒãã£ã³ã°åºæºã確ç«ããŸãã宿çã«æŽæ°æ å ±ãå ±æããã³ãŒããã¬ãã¥ãŒããŠåé¡ãæªç¶ã«é²ããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒWCAGïŒãèæ ®ããïŒWCAGã¬ã€ãã©ã€ã³ã«åŸãããšã§ããŠã§ããµã€ããé害ãæã€äººã ã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšãä¿èšŒãããŸãã
CSSéçºã®ããã®ããŒã«ãšãªãœãŒã¹
CSSéçºãç°¡çŽ åããã³ãŒãå質ãåäžãããããã€ãã®ããŒã«ãšãªãœãŒã¹ããããŸãïŒ
- CSSããªããã»ããµïŒSassãLessãStylus
- CSSãã¬ãŒã ã¯ãŒã¯ïŒBootstrapãTailwind CSSãFoundation
- ãªã³ãã£ã³ã°ããŒã«ïŒStylelintãCSSLint
- ã³ãŒããšãã£ã¿ãšIDEïŒVS CodeãSublime TextãWebStorm
- ãã©ãŠã¶éçºè ããŒã«ïŒChrome DevToolsãFirefox Developer Tools
- ãªã³ã©ã€ã³ããã¥ã¡ã³ãïŒMDN Web DocsãCSS-Tricks
- ã³ãã¥ããã£ãã©ãŒã©ã ïŒStack OverflowãReddit (r/css)
çµè«ïŒã°ããŒãã«ã«å ç¢ãªCSSã¢ãŒããã¯ãã£ã®æ§ç¯
ã¹ã¿ã€ã«ã®äŸåé¢ä¿å®£èšãã¢ãžã¥ãŒã«ã·ã¹ãã ããã¹ããã©ã¯ãã£ã¹ãå«ãCSSãç¿åŸããããšã¯ãä¿å®æ§ãé«ããã¹ã±ãŒã©ãã«ã§ãã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããããžã§ã¯ããäœæããããã«äžå¯æ¬ ã§ããã«ã¹ã±ãŒããçè§£ããã¢ãžã¥ã©ãŒãã¶ã€ã³ã®ååãåãå ¥ããããªããã»ããµã掻çšãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãéçºè ã¯äžçäžã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªäœéšãæäŸãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããåœéåãã¬ã¹ãã³ã·ãæ§ãã¢ã¯ã»ã·ããªãã£ãåªå ãããã¶ã€ã³ãå æ¬çã§ãããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®å€æ§ãªããŒãºãæºããããšãå¿ããªãã§ãã ãããçµ¶ããé²åãããŠã§ãéçºã®çŸå Žã§æåããããã«ã¯ãç¶ç¶çãªåŠç¿ãšææ°ã®CSSæè¡ã®ææ¡ãäžå¯æ¬ ã§ãã
ãããã®ã¬ã€ãã©ã€ã³ã«åŸããã¢ãããŒããç¶ç¶çã«æŽç·Žãããããšã§ãCSSéçºã®ã¯ãŒã¯ãããŒãå€§å¹ ã«æ¹åããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«åœ±é¿åã®ããããžã¿ã«äœéšãåµé ããããšãã§ããŸãã